<template>
    <div class="annotation-block-warp">
        <div class="ann-title">
            {{ getSubStringText(annTitle,10) }}
        </div>
        <div class="ann-content" v-html="getSubStringText(content,75)">{{ getSubStringText(content,75) }}</div>
        <div class="info">
            <span class="ann-date"> {{ formatDate }}</span>
            <span class="ann-text" style="margin-left:0.5em"> {{ annText }}</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: "AnnotationBlock",
        props:{
            annTitle:{
                type:String,
                default:'',
                required:false
            },
            content:{
                type:String,
                default:'',
                required:false
            },
            annDate:{
                type:String,
                required:false,
                default:''
            },
            annText:{
                type:String,
                default:'',
                required:false
            }
        },
        computed: {
            formatDate() {
                if (!this.annDate || this.annDate.lang == 0) {
                    return ''
                }
                return this.annDate.substr(0, 10)
            }
        },
        methods:{
            getSubStringText(text,len){
                if(!text || text.length==0){
                    return ''
                }
                if(text.length<len){
                    return text;
                }
                return text.substr(0,len)+"..."
            }
        }
    }
</script>

<style scoped lang="less">
    .annotation-block-warp {
        .ann-title {
            color: #333;
            font-weight: bolder;
            text-indent: 1em;
        }
        .ann-content, .info {
            margin: -0.23rem 0;
            color: #aaa!important;
            font-size: 0.8rem!important;
            line-height: 1.5em;
            padding-left: 1em!important;
        }
    }
</style>